// import Home from "../pages/home/Index";

import { lazy } from "react";
import { Navigate } from "react-router-dom";
import LazyLoad from "./LazyLoad";
import Auth from "./Auth";

const Home = lazy(() => import("../pages/home/Index"));
const Detail = lazy(() => import("../pages/detail/Index"));
const Login = lazy(() => import("../pages/login/Index"));
const Register = lazy(() => import("../pages/register/Index"));
const NotFound = lazy(() => import("../pages/notFound/Index"));

const HomeIndex = lazy(() => import("../pages/home/home/Index"));
const Classify = lazy(() => import("../pages/home/classify/Index"));
const Cart = lazy(() => import("../pages/home/cart/Index"));
const Mine = lazy(() => import("../pages/home/mine/Index"));

const routes = [
  {
    path: "/",
    element: <Navigate to="/home"></Navigate>,
  },
  {
    path: "/home",
    element: <LazyLoad component={<Home />} />,
    children: [
      {
        path: "/home",
        element: <Navigate to="/home/home"></Navigate>,
      },
      {
        path: "home",
        element: <LazyLoad component={<HomeIndex />} />,
      },
      {
        path: "classify",
        element: <LazyLoad component={<Classify />} />,
      },
      {
        path: "cart",
        element: (
          <LazyLoad
            component={
              <Auth>
                <Cart />
              </Auth>
            }
          />
        ),
      },
      {
        path: "mine",
        element: (
          <LazyLoad
            component={
              <Auth>
                <Mine />
              </Auth>
            }
          />
        ),
      },
    ],
  },
  {
    path: "/detail/:id",
    element: <LazyLoad component={<Detail />} />,
  },
  {
    path: "/login",
    element: <LazyLoad component={<Login />} />,
  },
  {
    path: "/register",
    element: <LazyLoad component={<Register />} />,
  },
  {
    path: "*",
    element: <LazyLoad component={<NotFound />} />,
  },
];

export default routes;
